<!-- 
说明：商品表列表
作者：292303959@qq.com
日期：2018-10-17 10:5:20
版本：1.0.0
-->
<template>
  <div>
    <mk-search-box>
      <el-row>
        <el-col :span="5">
          <label>商品名称:</label>
          <el-input v-model="ui.searchData.pdname"
                    size="small"></el-input>
        </el-col>
        <el-col :span="5">
          <label>所属系列:</label>
          <el-input v-model="ui.searchData.pdname"
                    size="small"></el-input>
        </el-col>
        <el-col :span="5">
          <label>上架时间:</label>
          <el-date-picker v-model="ui.searchData.pdshedata"
                          type="daterange"
                          align="right"
                          format="yyyy-MM-dd"
                          placeholder="选择日期范围"
                          :picker-options="dateOption">
          </el-date-picker>
        </el-col>
        <el-col :span="5">
          <label>商品状态:</label>
          <mk-config-select mk-config="Z_PD_STATE"
                            v-model="ui.searchData.pdstate"
                            size="small"
                            mkEmptyLabel="请选择"></mk-config-select>
        </el-col>
        <el-col :span="3">
          <mk-search-buttons v-model="ui.searching" />
        </el-col>
      </el-row>
    </mk-search-box>
    <el-row>
      <add @reload="doSearch" />
    </el-row>
    <mk-table v-model="ui"
              mk-multiple
              mk-index
              mk-sql-code="tProduct.select_list"
              mk-table-id="t-product.list.common"
              :mk-init-search-data="initSearchData"
              ref="table">
      <el-table-column align="left"
                       prop="pdname"
                       label="商品名称"
                       width="300" />

      <el-table-column align="left"
                       prop="brname"
                       label="所属系列"
                       width="200" />
      <el-table-column align="left"
                       prop="pdcrowd"
                       label="适用人群"
                       width="200" />
      <el-table-column align="left"
                       prop="pdunit"
                       label="商品单位"
                       width="100" />
      <el-table-column align="left"
                       prop="pdshedata"
                       label="上架时间"
                       sortable="custom"
                       width="150" />
      <el-table-column align="left"
                       prop="pdstate"
                       label="状态"
                       width="100">
        <template slot-scope="tProductpdstate">
          {{tProductpdstate.row.pdstate | data-config('Z_PD_STATE')}}
        </template>
      </el-table-column>
      <el-table-column prop="doing"
                       align="center"
                       label="操作"
                       width="200">
        <template slot-scope="scope">
          <edit :row="scope.row"
                @reload="doSearch"
                v-if="scope.row.pdstate==0" />
          <audit :row="scope.row"
                 @reload="doSearch"
                 v-if="scope.row.pdstate==1" />
          <view2 :row="scope.row"
                 @reload="doSearch" />
          <mk-button :type="4"
                     @click="onshell(scope.row.pdid)"
                     confirm-text="确定要上架么？"
                     v-if="scope.row.pdstate==0">申请上架</mk-button>
          <mk-button :type="4"
                     @click="outshell(scope.row.pdid)"
                     confirm-text="确定要下架么？"
                     v-if="scope.row.pdstate==3">下架</mk-button>

        </template>
      </el-table-column>
    </mk-table>
  </div>
</template>

<script>
  import {
    MkBase
  } from 'element-ui'
  import Add from './list/add-button'
  import Edit from './list/edit-button'
  import Audit from './list/audit-button'
  import View2 from './list/view-button'
  import searchData from './list/search-data'
  import dateOption from 'element-ui/lib/datas/mk-date-options'
  import dayjs from 'dayjs'

  export default {
    name: 't-product-list',
    mixins: [MkBase],
    components: {
      Add,
      Edit,
      Audit,
      View2,
      dateOption
    },
    data () {
      return {
        ui: {
          searching: true,
          searchData: searchData()
        }
      }
    },
    methods: {
      /**
       * 刷新本页面
       */
      doSearch () {
        this.ui.searching = true
      },
      async onshell (pdid) {
        let data = await this.$put('/tProduct/onShell.json', {
          pdid: pdid
        })
        if (data) {
          this.doSearch()
        }
      },
      async outshell (pdid) {
        let data = await this.$put('/tProduct/outShell.json', {
          pdid: pdid
        })
        if (data) {
          this.doSearch()
        }
      },
      initSearchData (data, flag) {
        if (data.pdshedata.length > 0) {
          data.bdate = dayjs(data.pdshedata[0]).format('YYYY-MM-DD 00:00:00')
          data.edate = dayjs(data.pdshedata[1]).format('YYYY-MM-DD 23:59:59')
        }
      }
    }
  }
</script>